<template>
  <div class="clientinformation">
    <el-row>
      <el-col :span="24">
        <div class="clientinformation-top">
          <div class="title">组织信息核验</div>
          <div class="tx"></div>
          <div class="c-redio">
            <span class="text1">经办人身份</span>
            <el-radio v-model="radio" label="1">组织其他员工</el-radio>
            <el-radio v-model="radio" label="2">法定代表人</el-radio>
          </div>

          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
            :label-position="labelPosition"
            hide-required-asterisk
          >
            <div v-if="radioUp">
            <div v-if="radio == 1">
              <el-form-item label="上传身份证" class="fm" prop="imageUrl">
                <el-upload
                  class="avatar-uploader activity-top"
                  :action="urlApi"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :on-change="changeImg"
                  accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
                >
                  <img
                    v-if="ruleForm.imageUrl"
                    :src="ruleForm.imageUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon">
                    <img
                      class="card-img"
                      src="../../../assets/home/img-identitycard-z.webp"
                    />
                  </i>
                  <div
                    class="activity-Img"
                    v-show="isDelete && ruleForm.imageUrl"
                  >
                    <i class="el-icon-delete in-2" @click.stop="deleteImg(0)"></i>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="经办人姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入经办人姓名"></el-input>
              </el-form-item>
              <el-form-item label="经办人身份证号码" prop="code">
                <el-input v-model="ruleForm.code" maxlength="18" placeholder="请输入身份证号码"></el-input>
              </el-form-item>
            </div>
            <div class="clientinformation-top t2">
              <div class="title">组织机构信息</div>
              <div class="tx"></div>
            </div>
            <el-form-item label="上传营业执照" class="fm" prop="upPermitUrl">
              <el-upload
                class="avatar-uploader activity-top"
                :action="urlApi"
                :show-file-list="false"
                :on-success="handlePermitSuccess"
                :on-change="changePermitImg"
                accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
              >
                <img
                  v-if="ruleForm.upPermitUrl"
                  :src="ruleForm.upPermitUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon">
                  <img
                    class="card-img"
                    src="../../../assets/home/img-identitycard-f.webp"
                  />
                </i>
                <div
                  class="activity-Img"
                  v-show="isDelete && ruleForm.upPermitUrl"
                >
                  <i class="el-icon-delete in-2" @click.stop="deleteImg(0)"></i>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="组织名称" prop="textureName">
              <el-input v-model="ruleForm.textureName" placeholder="请输入组织名称"></el-input>
            </el-form-item>
            <el-form-item label="证件号" prop="permitCode">
              <el-input v-model="ruleForm.permitCode" placeholder="请输入证件号"></el-input>
            </el-form-item>
            <div class="clientinformation-top t2 n3">
              <div class="title">法定代表人信息</div>
              <div class="tx"></div>
            </div>
            <el-form-item label="法人姓名" prop="representativeName">
              <el-input v-model="ruleForm.representativeName" placeholder="请输入法人姓名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即创建</el-button
              >
            </el-form-item>
            </div>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      radioUp:true,
      initData:null,//路由数据
      urlApi:process.env.VUE_APP_BASE_API+'/api/OCR/IdentityOcr',//图片请求地址
      ruleForm: {
        name: "", //经办人姓名
        code: "", //经办人身份证号码
        textureName:'',//组织名称
        permitCode:'',//证件号
        representativeName:'',//法人姓名
        imageUrl: "", //身份证图片
        upPermitUrl: "", //营业执照
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            min: 18,
            max: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        representativeName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        textureName: [
          { required: true, message: "请输入组织名称", trigger: "blur" },
        ],
        permitCode: [
          { required: true, message: "请输入证件号", trigger: "blur" },
        ],
        // imageUrl: [
        //   { required: true, message: "请上传身份证", trigger: "blur" },
        // ],
        // upPermitUrl: [
        //   { required: true, message: "请上传营业执照", trigger: "blur" },
        // ],
      },
      labelPosition: "right", //表单对其方式
      isDelete: "", //是否显示删除
    };
  },
  mounted(){
   this.initData = this.$route.params
   console.log(this.initData,'传递过来的参数')
  },
  watch:{
    radio(newVal,oldVal){
      this.radioUp = false
      this.ruleForm.name= ''
      this.ruleForm.code= ''
      this.ruleForm.textureName= ''
      this.ruleForm.permitCode= ''
      this.ruleForm.representativeName= ''
      this.ruleForm.imageUrl= ''
      this.ruleForm.upPermitUrl= ''
      setTimeout(v=>{
      this.radioUp = true
      },1)
    },
  },
  methods: {
    //验证
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false;
        }
      });
    },
    //确定提交
    submit(){
      let {name,
      code,
      textureName,
      permitCode,
      representativeName,
      imageUrl,
      upPermitUrl} = {...this.ruleForm}
      //组织其他的话参数数据全部都得发送
      if(this.radio == 1){
        let radioText='组织其他员工'
        // this.$api.verificationComInfo({
        //   id:this.radio,
        //   name,
        //   idno:code,
        //   comname:textureName,
        //   orgcode:permitCode,
        //   legalrepname:representativeName
        //   }).then(res => {
        //   if(res.code == 20000){
        //     this.$router.push({name:'corporateaccount'})
        //   }
        // })
        this.$router.push({name:'corporateaccount',params:{initData:this.initData,newData:this.ruleForm,radioText}})
      }else{
        // this.$api.verificationComInfo({
        //   id:this.radio,
        //   name,
        //   idno:code,
        //   comname:textureName,
        //   orgcode:permitCode,
        //   legalrepname:representativeName
        //   }).then(res => {
        //   if(res.code == 20000){
        //     this.$router.push({name:'corporateaccount'})
        //   }
        // })
        this.$router.push({name:'corporateaccount',params:{initData:this.initData,newData:this.ruleForm}})
      }
    },
    //身份证
    handleAvatarSuccess(res, file) {
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },
    changeImg(file) {
      let newStr = new FormData();
      newStr.append("file", file.raw);
      //       getUpload(kdghdf).then((res) => {
      //         this.activityTime= res.url;
      //       })
    },
    //营业执照
    handlePermitSuccess(res, file) {
      this.ruleForm.upPermitUrl = URL.createObjectURL(file.raw);
    },
    changePermitImg(file) {
      let newStr = new FormData();
      newStr.append("file", file.raw);
        this.$api.identityOcr({base64:newStr}).then((res) => {
          console.log(res)
      })
    },
    //删除图片
    deleteImg(index) {
      if (index == 0) {
        this.ruleForm.imageUrl = "";
        this.isDelete = false;
      }
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  position: relative;
  font-size: 28px;
  color: #8c939d;
  width: 183px;
  height: 144px;
  line-height: 144px;
  text-align: center;
}
.card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 183px;
  height: 144px;
}
.avatar {
  width: 183px;
  height: 144px;
  display: block;
}
</style>